<template>
  <PageWrapper>
    <a-card :bordered="false" class="j-print-demo">
      <section ref="print" id="printContent">
        <div style="text-align: center">
          <p style="font-size: 24px; font-weight: 800">人员履历</p>
        </div>
        <a-col :md="24" :sm="24">
          <div class="sign">
            <div class="resume-container">
              <table class="resume-table">
                <tr>
                  <td>姓名</td>
                  <td><a-input v-model:value="name" placeholder="请输入姓名" class="inputDemo" /></td>
                  <td>性别</td>
                  <td><a-input v-model:value="sex" placeholder="请输入性别" class="inputDemo" /></td>
                  <td>出生年月</td>
                  <td><a-date-picker v-model:value="birthday" @change="handleChange" :bordered="false" /></td>
                  <!-- <td><a-input v-model:value="birthday" placeholder="请输入出生年月" class="inputDemo" /></td> -->
                </tr>
                <tr>
                  <td>民族</td>
                  <td><a-input v-model:value="ethnicity" placeholder="请输入民族" class="inputDemo" /></td>
                  <td>籍贯</td>
                  <td><a-input v-model:value="birthplace" placeholder="请输入籍贯" class="inputDemo" /></td>
                  <td>出生地</td>
                  <td><a-input v-model:value="birthLocation" placeholder="请输入出生地" class="inputDemo" /></td>
                </tr>
                <tr>
                  <td>入党时间</td>
                  <td><a-date-picker v-model:value="joiningCPC" @change="handleChange" :bordered="false" /></td>
                  <!-- <td><a-input v-model:value="joiningCPC" placeholder="请输入入党时间" class="inputDemo" /></td> -->
                  <td>参加工作时间</td>
                  <td><a-date-picker v-model:value="dateOfEmployment" @change="handleChange" :bordered="false" /></td>
                  <!-- <td><a-input v-model:value="dateOfEmployment" placeholder="请输入参加工作时间" class="inputDemo" /></td> -->
                  <td>健康状况</td>
                  <td><a-input v-model:value="healthStatus" placeholder="请输入健康状况" class="inputDemo" /></td>
                </tr>
                <tr>
                  <td>专业技术职务</td>
                  <td><a-input v-model:value="technicalPosition" placeholder="请输入专业技术职务" class="inputDemo" /></td>
                  <td>熟悉专业有何特长</td>
                  <td colspan="3"><a-input v-model:value="professionalSpecial" placeholder="请输入熟悉专业有何特长"
                      class="inputDemo" /></td>
                </tr>
                <tr>
                  <td>全日制教育</td>
                  <td><a-select v-model:value="fullTimeEducation" show-search placeholder="请输入全日制教育"
                      style="width: 200px" :options="options" :filter-option="filterOption" @focus="handleFocus"
                      @blur="handleBlur" @change="handleChange" :bordered="false"></a-select></td>
                  <!-- <td><a-input v-model:value="fullTimeEducation" placeholder="请输入全日制教育" class="inputDemo" /></td> -->
                  <td>毕业院校系及专业</td>
                  <td colspan="3"><a-input v-model:value="graduateInstitutionAndMajorForFTE" placeholder="请输入毕业院校系及专业"
                      class="inputDemo" /></td>
                </tr>
                <tr>
                  <td>在职教育</td>
                  <td><a-select v-model:value="continuingEducation" show-search placeholder="请输入全日制教育"
                      style="width: 200px" :options="options" :filter-option="filterOption" @focus="handleFocus"
                      @blur="handleBlur" @change="handleChange" :bordered="false"></a-select></td>
                  <!-- <td><a-input v-model:value="continuingEducation" placeholder="请输入在职教育" class="inputDemo" /></td> -->
                  <td>毕业院校系及专业</td>
                  <td colspan="3"><a-input v-model:value="graduateInstitutionAndMajorForCE" placeholder="请输入毕业院校系及专业"
                      class="inputDemo" /></td>
                </tr>
                <tr>
                  <td>现任职务</td>
                  <td><a-input v-model:value="currentPosition" placeholder="请输入现任职务" class="inputDemo" /></td>
                  <td>拟任职务</td>
                  <td><a-input v-model:value="proposedPosition" placeholder="请输入拟任职务" class="inputDemo" /></td>
                  <td>拟免职务</td>
                  <td><a-input v-model:value="proposedTerminationPosition" placeholder="请输入拟免职务" class="inputDemo" />
                  </td>
                </tr>
              </table>
              <div class="photo-box">
                <div class="photo-placeholder" @click="triggerUpload">
                  <input type="file" ref="fileInput" @change="handleFileUpload" style="display: none" />
                  <img v-if="avatar" :src="avatar" alt="照片" class="photo-preview" />
                  <div v-else>点击上传照片</div>
                </div>
              </div>
            </div>
          </div>
          <div class="twosign">
            <div class="twosignOnebox">
              <div class="Leftbox">简历</div>
              <a-textarea v-model:value="resume" placeholder="" :rows="4" class="textareademo" />
            </div>
            <div class="twosignOnebox1">
              <div class="Leftbox1">奖惩情况</div>
              <a-textarea v-model:value="awardsAndPunishments" placeholder="" :rows="4" class="textareademo" />
            </div>
            <div class="twosignOnebox2">
              <div class="Leftbox2">年度考核结果</div>
              <a-textarea v-model:value="yearEndKeyResult" placeholder="" :rows="4" class="textareademo" />
            </div>
            <div class="twosignOnebox3">
              <div class="Leftbox3">任免理由</div>
              <a-textarea v-model:value="reasons" placeholder="" :rows="4" class="textareademo" />
            </div>
            <div class="twosignOnebox4">
              <div class="Leftbox4">主要家庭成员及社会关系</div>
              <div class="rightbox4">
                <div class="rightbox4one">
                  <div class="titlebox">称谓</div>
                  <div class="titlebox">姓名</div>
                  <div class="titlebox">出生日期</div>
                  <div class="titlebox">政治面貌</div>
                  <div class="titlebox">工作单位及职务</div>
                </div>
                <!-- 循环逻辑 -->

                <div class="rightbox4one">
                  <div class="titlebox"><a-input v-model:value="membersList[0].appellation" placeholder="请输入称谓"
                      class="titleboxinputDemo" />
                  </div>
                  <div class="titlebox"><a-input v-model:value="membersList[0].familyName" placeholder="请输入姓名"
                      class="titleboxinputDemo" />
                  </div>
                  <div class="titlebox"><a-input v-model:value="membersList[0].familyBirthday" placeholder="请输入出生日期"
                      class="titleboxinputDemo" />
                  </div>
                  <div class="titlebox"><a-input v-model:value="membersList[0].politicalAffiliation"
                      placeholder="请输入政治面貌" class="titleboxinputDemo" />
                  </div>
                  <div class="titlebox"><a-input v-model:value="membersList[0].placeOfWorkAndPosition"
                      placeholder="请输入工作单位" class="titleboxinputDemo" />
                  </div>
                </div>
                <div class="rightbox4one">
                  <div class="titlebox"><a-input v-model:value="membersList[1].appellation" placeholder="请输入称谓"
                      class="titleboxinputDemo" />
                  </div>
                  <div class="titlebox"><a-input v-model:value="membersList[1].familyName" placeholder="请输入姓名"
                      class="titleboxinputDemo" />
                  </div>
                  <div class="titlebox"><a-input v-model:value="membersList[1].familyBirthday" placeholder="请输入出生日期"
                      class="titleboxinputDemo" />
                  </div>
                  <div class="titlebox"><a-input v-model:value="membersList[1].politicalAffiliation"
                      placeholder="请输入政治面貌" class="titleboxinputDemo" />
                  </div>
                  <div class="titlebox"><a-input v-model:value="membersList[1].placeOfWorkAndPosition"
                      placeholder="请输入工作单位" class="titleboxinputDemo" />
                  </div>
                </div>
                <div class="rightbox4one">
                  <div class="titlebox"><a-input v-model:value="membersList[2].appellation" placeholder="请输入称谓"
                      class="titleboxinputDemo" />
                  </div>
                  <div class="titlebox"><a-input v-model:value="membersList[2].familyName" placeholder="请输入姓名"
                      class="titleboxinputDemo" />
                  </div>
                  <div class="titlebox"><a-input v-model:value="membersList[2].familyBirthday" placeholder="请输入出生日期"
                      class="titleboxinputDemo" />
                  </div>
                  <div class="titlebox"><a-input v-model:value="membersList[2].politicalAffiliation"
                      placeholder="请输入政治面貌" class="titleboxinputDemo" />
                  </div>
                  <div class="titlebox"><a-input v-model:value="membersList[2].placeOfWorkAndPosition"
                      placeholder="请输入工作单位" class="titleboxinputDemo" />
                  </div>
                </div>
                <div class="rightbox4one">
                  <div class="titlebox"><a-input v-model:value="membersList[3].appellation" placeholder="请输入称谓"
                      class="titleboxinputDemo" />
                  </div>
                  <div class="titlebox"><a-input v-model:value="membersList[3].familyName" placeholder="请输入姓名"
                      class="titleboxinputDemo" />
                  </div>
                  <div class="titlebox"><a-input v-model:value="membersList[3].familyBirthday" placeholder="请输入出生日期"
                      class="titleboxinputDemo" />
                  </div>
                  <div class="titlebox"><a-input v-model:value="membersList[3].politicalAffiliation"
                      placeholder="请输入政治面貌" class="titleboxinputDemo" />
                  </div>
                  <div class="titlebox"><a-input v-model:value="membersList[3].placeOfWorkAndPosition"
                      placeholder="请输入工作单位" class="titleboxinputDemo" />
                  </div>
                </div>
                <div class="rightbox4one">
                  <div class="titlebox"><a-input v-model:value="membersList[4].appellation" placeholder="请输入称谓"
                      class="titleboxinputDemo" />
                  </div>
                  <div class="titlebox"><a-input v-model:value="membersList[4].familyName" placeholder="请输入姓名"
                      class="titleboxinputDemo" />
                  </div>
                  <div class="titlebox"><a-input v-model:value="membersList[4].familyBirthday" placeholder="请输入出生日期"
                      class="titleboxinputDemo" />
                  </div>
                  <div class="titlebox"><a-input v-model:value="membersList[4].politicalAffiliation"
                      placeholder="请输入政治面貌" class="titleboxinputDemo" />
                  </div>
                  <div class="titlebox"><a-input v-model:value="membersList[4].placeOfWorkAndPosition"
                      placeholder="请输入工作单位" class="titleboxinputDemo" />
                  </div>
                </div>

                <!-- 循环逻辑 -->
              </div>
            </div>
          </div>
          <div class="threesign">
            <div class="twosignOnebox3">
              <div class="Leftbox3">呈报单位</div>
              <a-textarea v-model:value="reportingOrganization" placeholder="" :rows="4" class="textareademo" />
            </div>
          </div>
          <div class="foursign">
            <div class="foursignbox3">
              <div class="foursignLeftbox3">审批机关意见</div>
              <a-textarea v-model:value="reviewingBody" placeholder="" :rows="4" class="foursignLeftbox3areademo" />
              <div class="foursignLeftbox4">行政机关任免意见</div>
              <a-textarea v-model:value="organizationReasons" placeholder="" :rows="4"
                class="foursignLeftbox3areademo" />
            </div>
          </div>
        </a-col>
      </section>
      <div style="text-align: right; margin-top: 20px">
        <a-button type="primary" ghost @click="onSave" style="margin-left: 14px">保存</a-button>
        <!-- <a-button type="primary" ghost @click="onPrint" style="margin-left: 14px">导出</a-button>
        <a-button type="primary" ghost @click="onPrint" style="margin-left: 14px">导入</a-button> -->
      </div>
    </a-card>
  </PageWrapper>
</template>

<script lang="ts">
import { ref } from 'vue';
import { PageWrapper } from '/@/components/Page';
import { printJS } from '/@/hooks/web/usePrintJS';
import { useRoute, useRouter } from 'vue-router';
import { addInfo, getInfo } from './excelfile.api';
import { onMounted } from 'vue';
import { message } from 'ant-design-vue';
// import { func } from 'vue-types';
import dayjs from 'dayjs';
export default {
  name: 'PrintDemo',
  components: { PageWrapper },
  setup() {
    const options = ref([{
      value: '专科',
      label: '专科',
    }, {
      value: '本科',
      label: '本科',
    }, {
      value: '硕士',
      label: '硕士',
    }, {
      value: '博士',
      label: '博士',
    }]);
    const handleChange = value => {
      console.log(`selected ${value}`);
    };
    const handleBlur = () => {
      console.log('blur');
    };
    const handleFocus = () => {
      console.log('focus');
    };
    const filterOption = (input, option) => {
      return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0;
    };
    const birthdaydays = ref();
    //form 表单
    const form = ref({});
    //头像
    const avatar = ref('');
    //奖惩情况
    const awardsAndPunishments = ref('');
    //出生地 
    const birthLocation = ref('');
    //出生年月 birthday
    const birthday = ref<any>();
    //籍贯
    const birthplace = ref('');
    //在职教育	
    const continuingEducation = ref('');
    //现任职务
    const currentPosition = ref('');
    //参加工作时间		
    const dateOfEmployment = ref<any>();
    //民族	
    const ethnicity = ref('');
    //全日制教育
    const fullTimeEducation = ref('');
    //毕业院校及专业（在职教育）
    const graduateInstitutionAndMajorForCE = ref('');
    //毕业院校及专业（全日制教育）	
    const graduateInstitutionAndMajorForFTE = ref('');
    //健康状况
    const healthStatus = ref('');
    //入党时间
    const joiningCPC =ref<any>();
    //家庭成员及社会关系
    // interface Member {
    //   appellation: string;                // 称谓
    //   familyBirthday: string;             // 家庭成员的生日
    //   familyName: string;                 // 家庭成员的姓名
    //   placeOfWorkAndPosition: string;     // 工作地点和职位
    //   politicalAffiliation: string;       // 政治面貌
    // }
    const membersList = ref<any[]>([
      {
        appellation: "",
        familyBirthday: "",
        familyName: "",
        placeOfWorkAndPosition: "",
        politicalAffiliation: "",
      },
      {
        appellation: "",
        familyBirthday: "",
        familyName: "",
        placeOfWorkAndPosition: "",
        politicalAffiliation: "",
      }, {
        appellation: "",
        familyBirthday: "",
        familyName: "",
        placeOfWorkAndPosition: "",
        politicalAffiliation: "",
      },
      {
        appellation: "",
        familyBirthday: "",
        familyName: "",
        placeOfWorkAndPosition: "",
        politicalAffiliation: "",
      },
      {
        appellation: "",
        familyBirthday: "",
        familyName: "",
        placeOfWorkAndPosition: "",
        politicalAffiliation: "",
      },
    ]);
    //对应SysUser中的name字段
    const name = ref('');
    //行政机关任免意见
    const organizationReasons = ref('');
    //专业特长
    const professionalSpecial = ref('');
    //拟任职务
    const proposedPosition = ref('');
    //拟免职务
    const proposedTerminationPosition = ref('');
    //任免理由
    const reasons = ref('');
    //呈报单位
    const reportingOrganization = ref('');
    //简历
    const resume = ref('');
    //审批机关意见
    const reviewingBody = ref('');
    //对应SysUser中的 性别（1：男 2：女）
    const sex = ref('');
    //专业技术职务
    const technicalPosition = ref('');
    //对应SysUser中的id字段
    const route = useRoute();
    const userId = ref('');
    //年度考核结果
    const yearEndKeyResult = ref('');
    const proposedDismissal = ref('');
    const photoBase64 = ref<string | null>(null);
    const fileInput = ref<HTMLInputElement | null>(null);
    const router = useRouter();
    onMounted(async () => {
      const userId = route.query.userId;
      if (!userId) {
        message.warning('请从用户管理页面选择用户进入');
        router.push('/system/depart-user');
      } else {
        const getInfos = await getInfo(userId);
        avatar.value = getInfos.avatar
        awardsAndPunishments.value = getInfos.awardsAndPunishments
        const membersListA = JSON.parse(getInfos.membersList);
        for (let i = 0; i < membersListA.length; i++) {
          membersList.value[i].appellation = membersListA[i].appellation
          membersList.value[i].familyBirthday = membersListA[i].familyBirthday
          membersList.value[i].familyName = membersListA[i].familyName
          membersList.value[i].placeOfWorkAndPosition = membersListA[i].placeOfWorkAndPosition
          membersList.value[i].politicalAffiliation = membersListA[i].politicalAffiliation
        }
        birthLocation.value = getInfos.birthLocation
        birthday.value = dayjs(getInfos.birthday,'YYYY-MM-DD')
        birthplace.value = getInfos.birthplace
        continuingEducation.value = getInfos.continuingEducation
        currentPosition.value = getInfos.currentPosition
        dateOfEmployment.value = dayjs(getInfos.dateOfEmployment,'YYYY-MM-DD')
        ethnicity.value = getInfos.ethnicity
        fullTimeEducation.value = getInfos.fullTimeEducation
        graduateInstitutionAndMajorForCE.value = getInfos.graduateInstitutionAndMajorForCE
        graduateInstitutionAndMajorForFTE.value = getInfos.graduateInstitutionAndMajorForFTE
        healthStatus.value = getInfos.healthStatus
        joiningCPC.value = dayjs(getInfos.joiningCPC,'YYYY-MM-DD')
        name.value = getInfos.name
        organizationReasons.value = getInfos.organizationReasons
        proposedPosition.value = getInfos.proposedPosition
        proposedTerminationPosition.value = getInfos.proposedTerminationPosition
        reasons.value = getInfos.reasons
        reportingOrganization.value = getInfos.reportingOrganization
        resume.value = getInfos.resume
        reviewingBody.value = getInfos.reviewingBody
        sex.value = getInfos.sex
        technicalPosition.value = getInfos.technicalPosition
        yearEndKeyResult.value = getInfos.yearEndKeyResult
        professionalSpecial.value = getInfos.professionalSpecial
      }
    });
    function onPrint() {
      printJS({
        printable: '#printContent',
        type: 'html',
      });
    }
    const triggerUpload = () => {
      console.log('点击')
      fileInput.value?.click();
    };

    const handleFileUpload = (event: Event) => {
      const file = (event.target as HTMLInputElement)?.files?.[0];
      if (file) {
        const reader = new FileReader();
        reader.onload = (e) => {
          avatar.value = e.target?.result as string;
        };
        reader.readAsDataURL(file);
      }
    };

    const onSave = async () => {
      console.log('保存');
      const userIds = route.query.userId;
      form.value = {
        "avatar": avatar.value,
        "awardsAndPunishments": awardsAndPunishments.value,
        "birthLocation": birthLocation.value,
        "birthday": birthday.value || '',
        "birthplace": birthplace.value,
        "continuingEducation": continuingEducation.value,
        "currentPosition": currentPosition.value,
        "dateOfEmployment": dateOfEmployment.value || '',
        "ethnicity": ethnicity.value,
        "fullTimeEducation": fullTimeEducation.value,
        "graduateInstitutionAndMajorForCE": graduateInstitutionAndMajorForCE.value,
        "graduateInstitutionAndMajorForFTE": graduateInstitutionAndMajorForFTE.value,
        "healthStatus": healthStatus.value,
        "joiningCPC": joiningCPC.value|| '',
        "membersList": membersList.value,
        "name": name.value,
        "organizationReasons": organizationReasons.value,
        "professionalSpecial": professionalSpecial.value,
        "proposedPosition": proposedPosition.value,
        "proposedTerminationPosition": proposedTerminationPosition.value,
        "reasons": reasons.value,
        "reportingOrganization": reportingOrganization.value,
        "resume": resume.value,
        "reviewingBody": reviewingBody.value,
        "sex": sex.value,
        "technicalPosition": technicalPosition.value,
        "userId": userIds,
        "yearEndKeyResult": yearEndKeyResult.value
      }
      const Postmanagement = await addInfo(form.value);
      console.log(Postmanagement)
    };

    return {
      form,
      birthdaydays,
      avatar,
      awardsAndPunishments,
      birthLocation,
      birthday,
      birthplace,
      continuingEducation,
      currentPosition,
      dateOfEmployment,
      ethnicity,
      fullTimeEducation,
      graduateInstitutionAndMajorForCE,
      graduateInstitutionAndMajorForFTE,
      healthStatus,
      joiningCPC,
      membersList,
      name,
      organizationReasons,
      professionalSpecial,
      proposedPosition,
      proposedTerminationPosition,
      reasons,
      reportingOrganization,
      resume,
      reviewingBody,
      sex,
      technicalPosition,
      userId,
      yearEndKeyResult,
      proposedDismissal,
      onPrint,
      triggerUpload,
      fileInput,
      photoBase64,
      handleFileUpload,
      onSave,



      //
      value: ref(undefined),
      filterOption,
      handleBlur,
      handleFocus,
      handleChange,
      options,
    };
  },
};
</script>

<style lang="less" scoped>
.j-print-demo .ant-card-body {
  margin: 0;
  border: 0 solid black;
  min-width: 800px;
  color: #000000 !important;
}

.sign .ant-input {
  font-weight: bolder;
  text-align: center;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

.textareademo {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

.inputDemo {
  width: 100%;
  border: none;
  outline: none;
}

.resume-container {
  display: flex;
  width: 100%;
}

.resume-table {
  width: 80%;
  border-collapse: collapse;
}

.resume-table td {
  border: 1px solid black;
  padding: 8px;
  text-align: center;
}

.photo-box {
  width: 20%;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #000000;
  overflow: hidden;
  /* 确保图片不会溢出容器 */
}

.photo-placeholder {
  width: 80%;
  padding: 2%;
  /* Aspect ratio 1:1 */

  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  font-weight: bold;
}

.photo-preview {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.twosign {
  font-weight: bolder;
  text-align: center;
  outline: none !important;
  box-shadow: none !important;
  width: 100%;
  height: 1021px;
  border: 1px solid black;
  border-bottom: none;
  margin-top: 18px;
}

.twosignOnebox {
  width: 100%;
  height: 260px;
  border-bottom: 1px solid black;
  display: flex;
}

.Leftbox {
  width: 8.3%;
  height: 260px;
  border-right: 1px solid black;
  display: flex;
  justify-content: center;
  align-items: center;
}

.twosignOnebox1 {
  width: 100%;
  height: 160px;
  border-bottom: 1px solid black;
  display: flex;
}

.Leftbox1 {
  width: 8.3%;
  height: 160px;
  border-right: 1px solid black;
  display: flex;
  justify-content: center;
  align-items: center;
}

.twosignOnebox2 {
  width: 100%;
  height: 160px;
  border-bottom: 1px solid black;
  display: flex;
}

.Leftbox2 {
  width: 8.3%;
  height: 160px;
  border-right: 1px solid black;
  display: flex;
  justify-content: center;
  align-items: center;
}

.twosignOnebox3 {
  width: 100%;
  height: 120px;
  border-bottom: 1px solid black;
  display: flex;
}

.Leftbox3 {
  width: 8.3%;
  height: 120px;
  border-right: 1px solid black;
  display: flex;
  justify-content: center;
  align-items: center;
}

.twosignOnebox4 {
  width: 100%;
  height: 320px;

  display: flex;
}

.Leftbox4 {
  width: 7.65%;
  height: 320px;
  border-right: 1px solid black;
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: 1px solid black;
}

.rightbox4 {
  width: 92.35%;
  height: 320px;
}

.rightbox4one {
  width: 100%;
  height: 53.2px;
  border-bottom: 1px solid black;
  display: flex;
  justify-content: center;
  align-items: center;
}

.titlebox {
  width: 25%;
  height: 53.2px;
  border-right: 1px solid black;
  display: flex;
  justify-content: center;
  align-items: center;
}

.titleboxinputDemo {
  width: 100%;
  border: none;
  outline: none;
  height: 52px;
}

.threesign {
  font-weight: bolder;
  text-align: center;
  outline: none !important;
  box-shadow: none !important;
  width: 100%;
  height: 120px;
  border: 1px solid black;
  border-bottom: none;
  margin-top: 18px;
}

.foursign {
  font-weight: bolder;
  text-align: center;
  outline: none !important;
  box-shadow: none !important;
  width: 100%;
  height: 120px;
  border: 1px solid black;
  border-bottom: none;
  margin-top: 18px;
}

.foursignbox3 {
  width: 100%;
  height: 120px;
  border-bottom: 1px solid black;
  display: flex;
}

.foursignLeftbox3 {
  width: 22.3%;
  height: 120px;
  border-right: 1px solid black;
  display: flex;
  justify-content: center;
  align-items: center;
}

.foursignLeftbox4 {
  width: 22.3%;
  height: 120px;
  border-right: 1px solid black;
  border-left: 1px solid black;
  display: flex;
  justify-content: center;
  align-items: center;
}

.foursignLeftbox3areademo {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}
</style>
